<template>
  <div class="form-container">
    <a-form :model="formState" :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
      :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }" @finish="onFinish">
      <a-row :gutter="[16, 8]">
        <!-- 第一行 - 单列 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="formState.username" />
          </a-form-item>
        </a-col>

        <!-- 第二行 - 单列 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
        </a-col>

        <!-- 第三行 - 双列 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-item label="性别" name="gender">
            <a-select v-model:value="formState.gender">
              <a-select-option value="male">男</a-select-option>
              <a-select-option value="female">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-item label="年龄" name="age">
            <a-input-number v-model:value="formState.age" :min="0" />
          </a-form-item>
        </a-col>



        <!-- 修改备注和按钮部分 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-item label="备注" name="remark" :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }">
            <a-textarea v-model:value="formState.remark" :rows="4" style="width: 100%" />
          </a-form-item>
        </a-col>

        <!-- 提交按钮 -->
        <a-col :span="24">
          <div style="display: flex; justify-content: center;">
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button type="primary" html-type="submit">提交</a-button>
              <a-button style="margin-left: 10px" @click="onReset">重置</a-button>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-card title="台账列表" style="width: 100%">

    </a-card>

  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
import { bus } from "@/utils/eventbus"
const formState = reactive({
  username: '',
  password: '',
  gender: undefined,
  age: undefined,
  remark: ''
});

const handleRefresh = () => {
  message.success('数据已刷新');
}

onMounted(() => {
  bus.on("refreshData", handleRefresh)
})

onUnmounted(() => {
  bus.off("refreshData", handleRefresh)
})


const onFinish = (values: any) => {
  console.log('表单数据:', values);
  message.success('提交成功');
};

const onReset = () => {
  Object.assign(formState, {
    username: '',
    password: '',
    gender: undefined,
    age: undefined,
    remark: ''
  });
};
</script>

<style scoped>
.form-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* 防止flex项目溢出 */
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
}



/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.ant-form-item-label) {
    text-align: left !important;
  }
}
</style>